<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 340px;
            background: yellowgreen;
            margin:15px auto;
            text-align: center;
            padding: 4px;
        }
    </style>
    <script>
        window.onload=function () {
            //点击按钮切换图片 首先获得两个id
        var prev=document.getElementById("prev");
        var next=document.getElementById("next");
           //分别对两个按钮绑定单击响应函数
            //要切换图片就是要修改img的属性 src
            //要修改一个元素属性  元素.属性=新的属性值
         var img=document.getElementsByTagName("img")[0];
         var imgArr=["../imagconman/2020318.png","../imagconman/向日葵.png","../imagconman/荷花.png","../imagconman/蝗虫.png"];
         var index=0;//创建一个变量 来保存当前正在显示的图片的索引
         var info=document.getElementById("info");
            info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
            prev.onclick=function () {
            //alert("上一张");
                index--;//切换到上一张
                //判断index是否小于0
                if (index<0){
                    index=imgArr.length-1;
                }
                img.src=imgArr[index];
                info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
            };
            next.onclick=function () {
            //alert("下一张");
                index++;//切换下一张
                if (index>imgArr.length-1){

                    index=0;
                }
                img.src=imgArr[index];
                info.innerHTML="一共"+imgArr.length+"张图片"+",当前第"+(index+1)+"张";
            }
        }
    </script>

</head>
<body>
<div id="outer">
    <p id="info"></p>
    <img src="../imagconman/2020318.png" >
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
</body>
</html>